<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">账户管理</div>
      <div class="loadExcel">
        <div class="button topbutton" type="success" @click="addOne()">
          新增
        </div>
      </div>
      <div class="table" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          max-height="65vh"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column
            prop="name"
            label="用户名称"
            align="center"
            min-width="110"
          />
          <el-table-column
            label="角色类型"
            min-width="180"
            prop="roles.name"
            align="center"
          >
            <template #default="scope">
              <div>
                {{ scope.row.roles[0]?.name }}
              </div>
            </template></el-table-column
          ><el-table-column
            prop="createdBy"
            label="创建人"
            align="center"
            min-width="120"
          />

          <el-table-column
            label="创建时间"
            min-width="180"
            prop="createdDate"
            align="center"
          />

          <el-table-column
            label="上次修改人"
            min-width="110"
            prop="updateBy"
            align="center"
          />
          <el-table-column
            label="上次修改时间"
            min-width="180"
            prop="updateDate"
            align="center"
          />
          <el-table-column
            label="类型"
            min-width="110"
            prop="type"
            align="center"
            :formatter="formatincludeFlag"
          />
          <el-table-column
            label="状态"
            min-width="80"
            prop="status"
            align="center"
            :formatter="statusText"
          >
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @click="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑' && this.roleId == 1"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="back" @click="backToIndex()" v-show="this.roleId == 1">
            返回
          </div>
        </div>
        <div class="dialogText">{{ addOrEdit }}</div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner" v-show="this.roleId != 1">
              <div class="name">账户名称:</div>

              <input
                type="text"
                placeholder="账户名称"
                v-model="name"
                disabled
              />
            </div>
            <div class="inputInner" v-show="this.roleId == 1">
              <div class="name">账户名称:</div>
              <input
                type="text"
                placeholder="账户名称"
                v-model="name"
                v-show="addOrEdit == '编辑'"
                disabled
              />
              <input
                type="text"
                placeholder="账户名称"
                v-model="name"
                v-show="addOrEdit == '新增'"
              />
            </div>
            <div class="inputInner" v-show="this.roleId != 1">
              <div class="name">当前角色:</div>
              <el-select
                class="mySelect"
                :no-data-text="'无数据'"
                v-model="roles"
                disabled
                placeholder="选择角色"
                size="default"
                style="width: 220px; margin-left: 5px"
              >
                <el-option
                  v-for="item in roleList"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="inputInner" v-show="this.roleId == 1">
              <div class="name">选择角色:</div>
              <el-select
                class="mySelect"
                :no-data-text="'无数据'"
                v-model="roles"
                placeholder="选择角色"
                size="default"
                style="width: 220px; margin-left: 5px"
              >
                <el-option
                  v-for="item in roleList"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="inputInner" v-show="addOrEdit == '编辑'">
              <div class="name">原密码:</div>
              <input
                type="passWord"
                placeholder="原密码"
                v-model="oldPassword"
              />
            </div>
            <div class="inputInner" v-show="addOrEdit == '新增'">
              <div class="name">密码:</div>
              <input type="passWord" placeholder="密码" v-model="password" />
            </div>
            <div class="inputInner" v-show="addOrEdit == '编辑'">
              <div class="name">新密码:</div>
              <input type="passWord" placeholder="新密码" v-model="password" />
            </div>
            <div
              class="inputInner"
              v-show="addOrEdit == '编辑' && this.roleId == 1"
            >
              <div class="name">账户状态:</div>
              <el-radio-group v-model="status" style="margin-left: 5px">
                <el-radio value="1" size="large">启用</el-radio>
                <el-radio value="0" size="large">停用</el-radio>
              </el-radio-group>
              <!-- <input
                type="text"
                oninput="value=value.replace(/[^0|1]/g,'').slice(0,1)"
                name=""
                id=""
                placeholder="1：正常;0：停用"
                v-model="status"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
          accept=".xls,.xlsx"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import _ from "lodash";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import jsencrypt from "jsencrypt";
export default {
  name: "",
  data() {
    return {
      compare: {},
      shipPageNumer: 1,
      jsencrypt: "",
      locale: zhCn,
      value1: "",
      tableData: [],
      tableWidth: null,
      roleId: null,
      page: 1,
      size: 20,
      pageList: [],
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      roleList: [],
      totalNumber: 0,
      name: "",
      createdBy: "",
      createdDate: "",
      oldPassword: "",
      password: "",
      roles: [],
      status: "",
      type: "",
      updateBy: "",
      updateDate: "",
      id: "",
      totalPages: null,
      uploadfile: true,
      data: {
        name: "",
        createdBy: "",
        createdDate: "",
        oldPassword: "",
        password: "",
        roles: [],
        status: "",
        type: "",
        updateBy: "",
        updateDate: "",
        id: "",
      },

      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      multi: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },
    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },
    statusText(row, column) {
      let data = row[column.property];
      if (data == true) {
        return "正常";
      } else {
        return "停用";
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];

      if (data == null || data == "" || data == undefined) {
        return null;
      }
      let date = new Date(data);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    formatincludeFlag(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      if (data == 0) {
        return "系统数据";
      } else if (data == 1) {
        return "用户添加数据";
      }
    },
    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;

    },
    submitAddFile() {
      if (this.file) {
        let data = {
          file: this.file,
        };
        service({
          method: "post",
          url: "/ship-society-certificate/upload",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.file = "";
            this.fileName = "";
            this.uploadfile = "none";
            this.getRenderList();
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
    },
    // 导入文件结束=============
    backToIndex() {
      if (this.addOrEdit == "编辑") {
        let data = {
          roles: this.roles,
          oldPassword: this.oldPassword,
          password: this.password,
          status: this.status,
        };
        let equal = _.isEqual(data, JSON.parse(this.compare));

        if (equal) {
          this.close();
        } else {
          this.$confirm("数据信息有变化是否保存再离开？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          })
            .then(() => {
              this.sureAdd();
            })
            .catch(() => {
              this.close();
            });
        }
      } else if (this.addOrEdit == "新增") {
        this.close();
      }
    },
    async clickEdit(a) {

      this.addOrEdit = "编辑";
      let res = await service({
        method: "get",
        url: `/user/${a}`,
      });

      this.id = a;
      this.name = res.data.name;

      if (res.data.roles.length > 0 && res.data.roles[0] != null) {
        this.roles = res.data.roles[0].id;
      } else if (!res.data.roles[0]) {
        this.$message({
          message: "角色信息有误",
          type: "warning",
        });
      }

      if (res.data.status) {
        this.status = "1";
      } else if (res.data.status == false) {

        this.status = "0";
      } else {
        this.status = "";
      }

      this.type = res.data.type;
      // this.roles = res.roles[0].id;
      this.show = "block";
      this.compare = JSON.stringify({
        roles: this.roles,
        oldPassword: "",
        password: "",
        status: this.status,
      });
    },

    // 删除数据
    deleteOne(a) {

      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {

          if (action == "confirm") {
            service({
              method: "delete",
              url: `/user/${a}`,
            })
              .then((r) => {

                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                  this.show = "none";
                } else {
                  this.$message({
                    type: "info",
                    message: r.error,
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  type: "danger",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 弹窗确认按钮
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let dat = date.getDate();
      let hour = date.getHours();
      let min = date.getMinutes();
      let second = date.getSeconds();
      return `${year}-${month}-${dat} ${hour}:${min}:${second}`;
    },

    async beforelogin() {
      let res = await service.get("/system/get-public-key");
      this.key = res.data;
      sessionStorage.setItem("PublicKey", this.key);

      this.jsencrypt = new jsencrypt();
      this.jsencrypt.setPublicKey(res.data);

    },

    sureAdd() {
      let user = sessionStorage.getItem("userName");

      this.data.status = this.status == 1 ? true : false;
      this.data.type = this.type;

      if (this.addOrEdit == "编辑") {
        this.data.updateBy = user;
        this.data.id = this.id;
        if (this.status == 1) {
          this.data.status = true;
        } else if (this.status == 0) {
          this.data.status = false;
        } else {
          this.data.status = "";
        }
        this.data.updateDate = this.getTime();
        if (this.oldPassword && !this.password) {
          delete this.data.oldPassword;
          delete this.data.password;
          return this.$message({
            message: "修改密码时必须输入新密码和原密码",
            type: "danger",
          });
        } else if (!this.oldPassword && this.password) {
          delete this.data.oldPassword;
          delete this.data.password;
          return this.$message({
            message: "修改密码时必须输入新密码和原密码",
            type: "danger",
          });
        } else {
          if (this.password && this.oldPassword) {
            this.data.oldPassword = this.jsencrypt.encrypt(this.oldPassword);
            this.data.password = this.jsencrypt.encrypt(this.password);
          } else {
            delete this.data.oldPassword;
            delete this.data.password;
          }
        }

        if (this.roleId == 1) {
          delete this.data.name;
          for (let i = 0; i < this.roleList.length; i++) {
            if (this.roles == this.roleList[i].id) {
              this.data.roles.push(this.roleList[i]);
            }
          }
        } else {
          delete this.data.name;
          delete this.data.roles;
          delete this.data.status;
        }

        service({
          method: "put",
          data: this.data,
          url: "/user",
        })
          .then((r) => {

            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getRenderList();

              this.clearCanShu();
              if (this.roleId == 1) {
                this.show = "none";
              }
            } else {
              // this.$message({
              //   type: "info",
              //   message: r.error,
              // });
            }
          })
          .catch((err) => {
            // this.$message({
            //   type: "info",
            //   message: err.error,
            // });
            // this.clearCanShu();
          });
      } else {
        this.data.name = this.name;
        for (let i = 0; i < this.roleList.length; i++) {
          if (this.roles == this.roleList[i].id) {
            this.data.roles.push(this.roleList[i]);
          }
        }
        this.data.createdDate = this.getTime();
        this.data.createdBy = user;
        this.data.oldPassword = "";

        if (!this.password) {
          return this.$message({
            message: "新增账户必须输入新密码",
            type: "warning",
          });
        }
        this.data.password = this.jsencrypt.encrypt(this.password);
        service({
          method: "post",
          data: this.data,
          url: "/user",
        })
          .then((r) => {

            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.getRenderList();
              this.show = "none";
              this.clearCanShu();
            } else {
              this.$message({
                type: "info",
                message: r.error,
              });
            }
          })
          .catch((err) => {

            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
      this.clearCanShu();
    },
    reduceDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.clearCanShu();
    },
    // 新增
    addOne() {
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 查找所有角色
    async getRoleList() {
      let that = this;
      await service({
        methods: "get",
        url: "/role/find-all",
      })
        .then((e) => {
          that.roleList = e.data;
        })
        .catch((err) => {
          this.$message({
            message: "获取角色失败",
            type: "info",
          });
        });
    },

    //单个角色

    // 获取列表数据
    async getRenderList() {
      let data = {
        page: this.page,
        size: this.size,
      };

      await service({
        methods: "get",
        url: "/user/find-one-page",
        params: data,
      })
        .then((e) => {

          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;
          this.currentNum = e.data.numberOfElements;

          if (this.roleId == 4 || this.roleId == 3 || this.roleId == 2) {
            this.addOrEdit = "编辑";
            this.clickEdit(e.data.content[0].id);
          }
        })
        .catch((err) => {});
    },
    formatterDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    clearCanShu() {
      this.name = "";
      this.createdBy = "";
      this.createdDate = "";
      this.oldPassword = "";
      this.password = "";
      this.roles = [];
      this.status = "";
      this.type = "";
      this.updateBy = "";
      this.updateDate = "";
      this.id = "";

      this.data = {
        name: "",
        createdBy: "",
        createdDate: "",
        oldPassword: "",
        password: "",
        roles: [],
        status: "",
        type: "",
        updateBy: "",
        updateDate: "",
        id: "",
      };
    },
    async clickSee(a) {
      this.addOrEdit = "查看";
      let res = await service({
        method: "get",
        url: `/user/${a}`,
      });

      this.name = res.data.name;
      this.roles = res.data.roles[0].id;
      this.status = res.data.status;
      this.type = res.data.type;
      this.updateDate = res.data.updateDate;
      this.updateBy = res.data.updateBy;
      this.createdDate = res.data.createdDate;
      this.createdBy = res.data.createdBy;
      // this.roles = res.roles[0].id;
      this.show1 = "block";
    },
    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = window.innerWidth - 220 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = window.innerWidth - 100 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 20 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作

      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }


    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        if (this.roleId == 1) {
          this.close();
        }
      }
    },
  },

  created() {
    this.roleId = sessionStorage.getItem("role");
    
    this.sendMessage();
    this.getRenderList();
    this.getRoleList();
    this.beforelogin();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();

    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.addfile {
  width: 100%;
  height: 40px;
  font-size: 15px;
}
.addfile::file-selector-button {
  width: 100%;
  height: 4vh;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}
.fileName {
  font-size: 15px;
  color: black;
  height: 3vh;
  line-height: 3vh;
  width: 100%;
  text-align: center;
}

.manyInput {
  width: 780px;
  height: 80vh;
  overflow: auto;
  // background: red;
  margin: auto;

  // overflow: scroll;
  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .inputInner {
      width: 375px;
      height: 35px;
      // background: blue;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }
      .name1 {
        width: 210px;
        margin-left: 10px;
        height: 3vh;
        line-height: 3vh;
        text-indent: 1em;
        outline: none;
        font-size: 15px;
        border: none;
        background: #ebebeb;
        color: #365488;
      }
      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
      // input[type="number"] {
      //   appearance: textfield;
      //   -moz-appearance: textfield;
      // }
      // 　　input[type="number"]::-webkit-inner-spin-button,
      // 　　input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}
.dialog2 {
  width: 220px;
  height: 150px;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}
.upContain {
  width: 60%;
  margin: auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  // flex-direction: column;
}
.upFileSrue {
  width: 60%;
  height: 25px;
  margin: auto;
  margin-top: 2vh;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .buttonUpdata {
    outline: none;
    border: none;
    width: 40%;
    border-radius: 0.5vh;
    height: 25px;
    background: #ebebeb;
    color: white;
  }
  .buttonUpdata1 {
    background: #94d474;
  }
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    .loadTop {
      width: 50%;
      line-height: 4vh;
      color: #777676;
      // text-indent: 10px;
      margin-left: 10px;
      font-size: 20px;
      font-weight: 800;
    }
    .loadSecond {
      width: 280px;

      color: #777676;
      text-align: center;
      line-height: 33px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(3) {
        background: #242121;
      }
    }
    // .loadExcel {
    //   width: 200px;
    //   margin-top: 10px;
    //   margin-left: 10px;

    //   height: 20px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   .button {
    //     width: 60px;
    //     line-height: 20px;
    //     font-size: 18px;
    //     text-align: center;
    //   }
    // }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

/* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */

input[type="checkbox"].switch {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 40px;
  margin-top: 5px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  transition: border-color 0.3s, background-color 0.3s;
}

input[type="checkbox"].switch::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0, 0, 2px, #999;
  transition: 0.4s;
  top: 2px;
  position: absolute;
  left: 2px;
}

input[type="checkbox"].switch:checked {
  background: rgb(19, 206, 102);
}
/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
input[type="checkbox"].switch:checked::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 2px;
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 110px;
  }
}
</style>
